import { Card, Form, Input, Switch, Divider, Typography, Row, Col } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { NodeInputKeyEnum } from '@/types/workflow/constant';

const { Title, Text } = Typography;
const { TextArea } = Input;

type SystemConfigProps = {
  onValuesChange?: (changedValues: any, allValues: any) => void;
  initialValues?: Partial<SystemConfigValues>;
};

export type SystemConfigValues = {
  [NodeInputKeyEnum.welcomeText]?: string;
  [NodeInputKeyEnum.questionGuide]?: string;
  [NodeInputKeyEnum.tts]?: boolean;
  [NodeInputKeyEnum.whisper]?: boolean;
  [NodeInputKeyEnum.chatInputGuide]?: string;
};

function SystemConfig({ onValuesChange, initialValues }: SystemConfigProps) {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  return (
    <div className="p-4">
      <Card bordered={false} className="rounded-lg shadow-md">
        <Title level={4} className="mb-4">
          {t('系统配置')}
        </Title>

        <Form
          form={form}
          layout="vertical"
          initialValues={initialValues}
          onValuesChange={onValuesChange}
        >
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name={NodeInputKeyEnum.welcomeText}
                label={t('欢迎语')}
                tooltip={t('用户进入对话时展示的欢迎语')}
              >
                <TextArea rows={3} placeholder={t('请输入欢迎语')} maxLength={500} showCount />
              </Form.Item>
            </Col>

            <Col span={24}>
              <Form.Item
                name={NodeInputKeyEnum.questionGuide}
                label={t('问题指引')}
                tooltip={t('指引用户输入特定格式的问题')}
              >
                <TextArea
                  rows={3}
                  placeholder={t('示例：您可以这样提问...')}
                  maxLength={500}
                  showCount
                />
              </Form.Item>
            </Col>

            <Col span={24}>
              <Form.Item
                name={NodeInputKeyEnum.chatInputGuide}
                label={t('输入框引导语')}
                tooltip={t('输入框中显示的引导文字')}
              >
                <Input placeholder={t('请输入问题...')} maxLength={100} />
              </Form.Item>
            </Col>

            <Divider />

            <Col span={12}>
              <Form.Item
                name={NodeInputKeyEnum.tts}
                label={t('语音合成')}
                tooltip={t('将AI回复转换为语音')}
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>

            <Col span={12}>
              <Form.Item
                name={NodeInputKeyEnum.whisper}
                label={t('语音识别')}
                tooltip={t('支持用户语音输入')}
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </div>
  );
}

export default SystemConfig;
